<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="add">点我</button>
       <p>{{num}}</p> 
       <input type="text "v-model="name">
       <li v-for="index in movie">
           <img :src="index.img" >
           <h5>{{index.name}}</h5>
           <p>{{index.score}}</p>
       </li>
      </div>
      
      <script>
      const hello = {
        
        data: function() {
            return {
                num:0,
                massage:name,
                movie:[
                    {
                        name:"钢铁侠",
                        score:"5.2",
                        img:"https://bkimg.cdn.bcebos.com/pic/55e736d12f2eb9389b506115e9339235e5dde611c181?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg",
                    },{
                        name:"美国队长",
                        score:"5.2",
                        img: "https://bkimg.cdn.bcebos.com/pic/50da81cb39dbb6fd0dfdbec00724ab18962b37b5?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg",
                    },{
                        name:"毒液",
                        score:"5.2",
                        img: "https://bkimg.cdn.bcebos.com/pic/2f738bd4b31c8701a18bbf39e533892f070829385195?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg",
                    }
                ]
            }
           
        },
        methods:{
                add:function(){
                    this.num=this.num+1
                }
            }
    }
    const app = Vue.createApp(hello)
    app.mount('#app') 
    </script>
   
</body>
</html>